.hero {
}

.hero__header {
  position: relative;
}

.hero__intro-text {
  filter: none;
}

.hero__intro-text__games {
  white-space: nowrap;
  color: $color-off-black;
  display: block;
  overflow: hidden;
  margin: 0 -1rem;
  padding: 0 1rem;

  &:before,
  &:after {
    content: '';
    display: block;
    position: absolute;
    top: 0;
    bottom: 0;
    border-top: rgb(75, 75, 75) 2px solid;
    border-radius: 3px;
    z-index: 20;
  }

  &:before {
    left: 0;
    border-left: rgba(255, 255, 255, 0.1) 1px solid;
    border-right: black 2px solid;
  }

  &:after {
    right: 0;
    border-right: rgba(255, 255, 255, 0.1) 1px solid;
    border-left: black 2px solid;
  }
}

.hero__intro-text__game {
  cursor: pointer;
  transition: color 500ms $ease-in-out-quint;

  &:hover {
    color: darken($color-off-black, 5%);
    transition: color 100ms linear;
  }
}

.hero__intro-text__game.carousel__item--current {
}

.hero__intro-text__group.carousel__item--current {
  color: $color-off-white;
}

.hero__intro-text__ra.carousel__item--current {
  color: $color-red-alert;
}

.hero__intro-text__cnc.carousel__item--current {
  color: $color-command-and-conquer;
}

.hero__intro-text__ts.carousel__item--current {
  color: $color-tiberian-sun;
}

.hero__intro-text__d2k.carousel__item--current {
  color: $color-dune-2000;
}

.hero__intro-text__tagline {
  display: block;
}

.install {
  position: absolute;
  top: 50%;
  right: 0;
  z-index: $z-install;
  will-change: transform;

  @media screen and (max-width: 720px) {
    position: static;
    top: auto;
    right: auto;
  }
}


.hero-carousel {
  z-index: $z-hero-carousel; // performance. Prevents paint issue when combined with "no build" patterns on the sides
  margin-top: 1.5rem;
  margin-bottom: 2.5rem;

  .carousel__item__content {
    background: $color-off-black;
  }
}

.hero-carousel__items {
  @include metalPanel();
  margin-bottom: 1rem;
  overflow: hidden;
}

.hero-carousel__image {
  display: block;
  width: 100%;
  border-radius: 4px;
  image-rendering: -moz-crisp-edges;
  image-rendering: pixelated;
  opacity: 0.15;
  transition: opacity 500ms $ease-in-out-quint;
}

.carousel__item--current .hero-carousel__image {
  opacity: 1;
}

.hero-carousel .carousel__item {
  width: 100%;
}

.additional-info {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 2rem;

  @media screen and (max-width: 680px) {
    grid-template-columns: 1fr;
    grid-gap: 1.5rem;
  }
}


.home__developer-updates__posts__header {
  @extend %scanlines;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.5rem 1.5rem;
  border-top-left-radius: 4px;
  border-top-right-radius: 4px;

  strong, a {
    color: black;
  }
}

.home__developer-updates__posts {
  @include metalPanel();
}
